<template>
  <div class="container">
    <!-- 顶部欢迎区域 -->
    <header class="header">
      <img src="/static/header-bg.jpg" alt="背景" class="header-bg">
      <div class="header-overlay"></div>
      <div class="header-content">
        <div class="user-info">
          <div class="avatar">
            <img src="/static/news/panda.png" alt="头像">
          </div>
          <div class="welcome-text">
            <!-- 登录状态切换显示 -->
            <h1 v-if="isLogin">HI~ 康弘</h1>
            <h1 v-else>HI~欢迎回来</h1>
            <!-- 登录/退出登录按钮 -->
            <button class="login-btn" @click="handleLoginBtn" v-if="!isLogin">登录</button>
            <button class="login-btn" @click="handleLogout" v-else style="background-color: #1890ff;">退出登录</button>
          </div>
        </div>
        
        <div class="stats">
          <div class="stat-item">
            <span>关注</span>
            <span>3</span>
          </div>
          <div class="stat-divider"></div>
          <div class="stat-item">
            <span>话题</span>
            <span>0</span>
          </div>
        </div>
      </div>
    </header>

    <!-- 功能按钮区（移除跳转链接，点击无响应） -->
    <div class="features">
      <div class="feature-item" @click.prevent>
        <div class="feature-icon">
          <svg viewBox="0 0 24 24" fill="#ff4d4f">
            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
          </svg>
        </div>
        <span class="feature-text">收藏</span>
      </div>
      
      <div class="feature-item" @click.prevent>
        <div class="feature-icon">
          <svg viewBox="0 0 24 24" fill="#ff4d4f">
            <path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
          </svg>
        </div>
        <span class="feature-text">历史</span>
      </div>
      
      <div class="feature-item" @click.prevent>
        <div class="feature-icon">
          <svg viewBox="0 0 24 24" fill="#ff4d4f">
            <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-4c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h4c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
          </svg>
        </div>
        <span class="feature-text">设置</span>
      </div>
    </div>

    <!-- 广告横幅（移除跳转） -->
    <div class="ad-banner" @click.prevent>
      <div class="ad-icon">
        <img src="/static/news/panda.png" alt="活动图标">
      </div>
      <div class="ad-content">
        <p class="ad-title">积分中心 · 现金红包专场</p>
        <p class="ad-desc">瓜分30万现金红包</p>
      </div>
      <button class="ad-btn" @click.prevent>
        速抢
        <svg viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
        </svg>
      </button>
    </div>

    <!-- 功能入口区（移除跳转） -->
    <div class="action-area">
      <div class="decor-element decor-1"></div>
      <div class="decor-element decor-2"></div>
      <div class="decor-element decor-3"></div>
      
      <div class="action-buttons">
        <div class="action-btn" style="background-color: #e6f7ff;" @click.prevent>
          <svg viewBox="0 0 24 24" fill="#1890ff">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </div>
        
        <div class="action-btn" style="background-color: #fff0f0;" @click.prevent>
          <svg viewBox="0 0 24 24" fill="#f5222d">
            <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
          </svg>
        </div>
        
        <div class="action-btn" style="background-color: #fff7e6;" @click.prevent>
          <svg viewBox="0 0 24 24" fill="#faad14">
            <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/>
          </svg>
        </div>
      </div>
      
      <div class="action-stats">
        <p class="stats-number">已有385,893人</p>
        <p class="stats-text">在这里发布身边的新鲜事</p>
      </div>
    </div>

    <!-- 底部占位 -->
    <div class="bottom-space"></div>
  </div>
</template>

<script>
export default {
  name: 'LogPage',
  data() {
    return {
      isLogin: false // 登录状态标识
    }
  },
  mounted() {
    // 页面加载时读取本地存储，恢复登录状态
    const loginStatus = uni.getStorageSync('isLogin');
    this.isLogin = loginStatus === true;
  },
  methods: {
    // 未登录时点击登录按钮跳转
    handleLoginBtn() {
      // 跳转到 pages/LoginRegister/LoginRegister 页面（uni-app 规范跳转）
      uni.navigateTo({
        url: '/pages/LoginRegister/add/add'
      });
    },
    // 已登录时点击退出登录
    handleLogout() {
      // 清除本地存储的登录状态
      uni.removeStorageSync('isLogin');
      this.isLogin = false;
      // 提示退出成功
      uni.showToast({
        title: '退出登录成功',
        icon: 'none',
        duration: 1500
      });
    }
  }
}
</script>

<style scoped>
/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  background-color: #f5f5f5;
  min-height: 100vh;
  color: #333;
}

/* 自定义工具类 */
.container {
  max-width: 500px;
  margin: 0 auto;
  background-color: #fff;
  min-height: 100vh;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  overflow: hidden;
}

/* 顶部欢迎区域 */
.header {
  position: relative;
  height: 160px;
  overflow: hidden;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.2));
  z-index: 2;
}

.header-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #fff;
  padding: 3px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.welcome-text {
  margin-left: 15px;
}

.welcome-text h1 {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.login-btn {
  background-color: #ff4d4f;
  color: white;
  border: none;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.login-btn:hover {
  background-color: #ff7875;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}

.stats {
  display: flex;
  margin-top: 15px;
}

.stat-item {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 0.9rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.stat-item span:first-child {
  font-weight: 500;
}

.stat-item span:last-child {
  font-weight: 700;
  margin-left: 5px;
}

.stat-divider {
  width: 1px;
  height: 16px;
  background-color: rgba(255,255,255,0.3);
  margin: 0 15px;
}

/* 功能按钮区 */
.features {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #666;
  cursor: default; /* 去除点击指针样式 */
}

.feature-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}

.feature-icon::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);
}

.feature-icon svg {
  width: 24px;
  height: 24px;
  position: relative;
  z-index: 1;
}

.feature-text {
  font-size: 0.85rem;
  font-weight: 500;
}

/* 广告横幅 */
.ad-banner {
  margin: 15px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #ff4d4f 0%, #ff7a45 100%);
  display: flex;
  align-items: center;
  padding: 12px 0;
  box-shadow: 0 4px 12px rgba(255,77,79,0.2);
  position: relative;
  overflow: hidden;
  cursor: default; /* 去除点击指针样式 */
}

.ad-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.ad-icon {
  width: 50px;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.ad-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.ad-content {
  flex: 1;
  padding-right: 60px;
  position: relative;
  z-index: 1;
}

.ad-title {
  color: rgba(255,255,255,0.9);
  font-size: 0.75rem;
  margin-bottom: 3px;
}

.ad-desc {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
}

.ad-btn {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  background-color: #28a745;
  color: white;
  border: none;
  padding: 0 18px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: default; /* 去除点击指针样式 */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* 禁止点击事件 */
}

.ad-btn svg {
  margin-left: 5px;
  width: 16px;
  height: 16px;
}

/* 功能入口区 */
.action-area {
  margin: 0 15px 15px;
  background-color: #fff;
  border-radius: 12px;
  padding: 30px 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  position: relative;
  overflow: hidden;
}

.action-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e5e5e5' fill-opacity='0.4'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.5;
}

.action-buttons {
  display: flex;
  justify-content: space-around;
  position: relative;
  z-index: 1;
}

.action-btn {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  cursor: default; /* 去除点击指针样式 */
  pointer-events: none; /* 禁止点击事件 */
  position: relative;
  overflow: hidden;
}

.action-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 60%);
}

.action-btn svg {
  width: 32px;
  height: 32px;
  position: relative;
  z-index: 1;
}

.action-stats {
  text-align: center;
  margin-top: 25px;
  position: relative;
  z-index: 1;
}

.stats-number {
  color: #333;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 5px;
}

.stats-text {
  color: #666;
  font-size: 0.9rem;
}

/* 装饰元素 */
.decor-element {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(54, 162, 235, 0.05);
  z-index: 0;
}

.decor-1 {
  width: 60px;
  height: 60px;
  top: 20px;
  right: 20px;
}

.decor-2 {
  width: 40px;
  height: 40px;
  bottom: 40px;
  left: 30px;
  background-color: rgba(255, 99, 132, 0.05);
}

.decor-3 {
  width: 25px;
  height: 25px;
  top: 80px;
  left: 20px;
  background-color: rgba(255, 206, 86, 0.05);
}

/* 底部占位 */
.bottom-space {
  height: 20px;
}
</style>